<!--
  盛付通： 【参数配置】 页面内容

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->
<template>
  <AppConfigCommonPage ref="appConfigCommonPageRef">
    <template #advancedConfigPage>
      <a-col :span="24">
        <a-collapse>
          <a-collapse-panel key="k1" header="高级设置">
            <a-form-item label="商户简称更改（支付公司侧）">
              <div class="jeepay-m-pz-box">
                <a-form-item label="商户简称" name="">
                  <a-input v-model:value.trim="vdata.mchShortName" />
                </a-form-item>
                <a-form-item label="客服电话" name="">
                  <a-input v-model:value.trim="vdata.servicePhone" />
                </a-form-item>
                <a-button
                  class="jeepay-m-btn"
                  data-type="text"
                  size="small"
                  style="margin-left: 20px;"
                  type="primary"
                  @click="configInterfaceFunc('MCH_SHORT_NAME', { servicePhone: vdata.servicePhone, mchShortName: vdata.mchShortName})"
                >
                  <save-outlined />更改
                </a-button>
              </div>
              <p class="jeepay-tip-text">该名称将于支付成功页向向消费者进行展示，不要频繁修改（以支付公司接口为准）</p>
            </a-form-item>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
    </template>
  </AppConfigCommonPage>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import AppConfigCommonPage from '../../commons/AppConfigCommonPage.vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const appConfigCommonPageRef = ref()
const vdata : any = reactive({
   mchShortName: '', // 商户简称
   servicePhone: ''// 客服电话
})

// 对外暴露的 页面渲染函数  也用作初始化
function pageRender (applyId){
  appConfigCommonPageRef.value.pageRender(applyId) // 直接调用通用组件
}
// 参数配置公共组件【高级设置】插槽方法覆写
function configInterfaceFunc(configType, configVal) {  
  if (!configVal.servicePhone && !configVal.mchShortName) {
    return
  }
  appConfigCommonPageRef.value.configInterfaceFunc(configType, configVal)
}

defineExpose({ pageRender })
</script>
<style scoped>
  .form-item-content{
    width: 70%
  }
</style>
